<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :data-callback="dataCallback">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增分类</el-button>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"> 删除</el-button>
      </template>
    </ProTable>
    <el-image-viewer v-if="imgViewVisible" :url-list="[imageUrl]" @close="imgViewVisible = false" />
    <CategoryDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="tsx" name="categoryMange">
import { ref } from "vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import MenuDrawer from "@/views/proTable/components/MenuDrawer.vue";
import { useHandleData } from "@/hooks/useHandleData";
import { Category } from "@/api/interface";
import { addCategory, deleteCategory, editCategory, getCategoryList } from "@/api/modules/category";
import CategoryDrawer from "@/views/proTable/components/CategoryDrawer.vue";

const proTable = ref<ProTableInstance>();

const imgViewVisible = ref(false);
const imageUrl = ref("");
const showLargeImage = (url: string) => {
  imageUrl.value = url;
  imgViewVisible.value = true;
};

// 表格配置项
const columns: ColumnProps<Category.ResCategory>[] = [
  { prop: "name", label: "分类名字", search: { el: "input" } },
  {
    prop: "picture",
    label: "分类图片",
    render: scope => {
      return (
        <img
          width="100px"
          height="100px"
          onClick={() => showLargeImage(scope.row.picture)}
          src={scope.row.picture}
          alt={scope.row.name}
        />
      );
    }
  },
  { prop: "operation", label: "操作", width: 165, fixed: "right" }
];

const dataCallback = (data: any) => {
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  console.log("11111133333" + newParams);
  return getCategoryList(newParams);
};

const deleteAccount = async (params: Category.ResCategory) => {
  await useHandleData(deleteCategory, { id: [params.id] }, `删除【${params.name}】产品分类`);
  proTable.value?.getTableList();
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof MenuDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<Category.ResCategory> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? addCategory : title === "编辑" ? editCategory : undefined,
    getTableList: proTable.value?.getTableList
  };
  console.log(drawerRef);
  drawerRef.value?.acceptParams(params);
};
</script>
